<template>
  <section class="xxz">
    <!-- <h3><slot></slot></h3> -->
    <ul>
      <PlayListSongsitem
        @update:music="$emit('update:music', $event)"
        @update:playlist="$emit('update:playlist', newSongs)"
        v-for="(song, index) in newSongs"
        :key="song.id"
        :item="song"
        :index="index"
        :currentMusic="$attrs.currentMusic"
        :paused="$attrs.paused"
      />
    </ul>
     <div class="toomootP" @click.stop="$emit('too-more')">换一批</div>
  </section>
</template>

<script>
// import BorderedTitle from "@/components/BorderedTitle.vue";
import PlayListSongsitem from "@/components/PlayListSongsitem.vue";
// import hotNewmusic from "@/components/hotNewmusic.vue";
export default {
  props: ["newSongs"],
  components: {
    PlayListSongsitem,
    // hotNewmusic,
  },
};
</script>

<style>
 .toomootP{
    width: 100vw;
    height: 30px;
    font-size: 16px;
    color: #8bb8dd;
    text-align: center;
    line-height: 30px;
  }
/* .xxz{
  background: url("../assets/sxc.jpg");
  background-size: 100% 100%;
} */
</style>